<!DOCTYPE html>
<html>
<head>
    <title>图像分类器</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
        .upload-box { border: 2px dashed #ccc; padding: 20px; text-align: center; margin-bottom: 20px; }
        #preview { max-width: 100%; margin-top: 10px; display: none; }
        #result { margin-top: 20px; padding: 10px; background: #f5f5f5; display: none; }
    </style>
</head>
<body>
    <h1>CIFAR-10图像分类器</h1>
    <div class="upload-box">
        <input type="file" id="fileInput" accept="image/*">
        <p>或将图片拖放到此处</p>
        <img id="preview" alt="预览图">
    </div>
    <div id="result">
        <h3>预测结果:</h3>
        <p id="prediction"></p>
        <p id="confidence"></p>
    </div>

    <script>
        const fileInput = document.getElementById('fileInput');
        const preview = document.getElementById('preview');
        const resultDiv = document.getElementById('result');
        const predictionText = document.getElementById('prediction');
        const confidenceText = document.getElementById('confidence');

        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            handleFile(file);
        });

        // 拖放功能
        document.addEventListener('dragover', function(e) {
            e.preventDefault();
            e.stopPropagation();
        });

        document.addEventListener('drop', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const file = e.dataTransfer.files[0];
            fileInput.files = e.dataTransfer.files;
            handleFile(file);
        });

        function handleFile(file) {
            if (!file.type.match('image.*')) {
                alert('请上传图片文件');
                return;
            }

            // 显示预览
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = 'block';

                // 发送到后端预测
                predictImage(file);
            };
            reader.readAsDataURL(file);
        }

        function predictImage(file) {
            const formData = new FormData();
            formData.append('file', file);

            fetch('/predict', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert('错误: ' + data.error);
                    return;
                }

                resultDiv.style.display = 'block';
                predictionText.textContent = `类别: ${data.prediction}`;
                confidenceText.textContent = `置信度: ${(data.confidence * 100).toFixed(2)}%`;
            })
            .catch(error => {
                console.error('Error:', error);
                alert('预测失败: ' + error.message);
            });
        }
    </script>
</body>
</html>